<script lang="ts" setup>
import tzLoading from '@/components/tz-loading.vue'

const tableData = ref([])

const loading = ref(true)


// search
const searchForm = reactive({
  time: [],
  equipmentid: '',
  projectid: ''
})

const optionloading = ref(true)
const projectoptions = ref([])
const equipmentoptions = ref([])


// 获取项目列表
const getprojectData = () => {
  tProjectControllerSellist().then(res => {
    projectoptions.value = res.result.map(v => {
      return {
        value: v.id,
        label: v.name,
      }
    })
  })
}

getprojectData()

// 获取设备列表
const getequipmentData = () => {
  optionloading.value = true
  searchForm.equipmentid = ''
  tProjectControllerSelequipmentbyid(searchForm.projectid).then(res => {
    equipmentoptions.value = res.result.map(v => {
      return {
        value: v.id,
        label: v.equipmentid,
      }
    })
  }).finally(() => {
    optionloading.value = false
  })
}



// 分页
const pageSize4 = ref(10)
const currentPage4 = ref(1)
const total = ref(0)
const size = ref<ComponentSize>('default')
const disabled = ref(false)
const background = ref(false)

const handleSizeChange = (val: number) => {
  getData()
}
const handleCurrentChange = (val: number) => {
  getData()
}


const getData = () => {
  loading.value = true
  let Q = {
    "endtime": searchForm.time.length > 0 ? searchForm.time[1] : '',
    "equipmentid": searchForm.equipmentid,
    "index": currentPage4.value,
    "projectid": searchForm.projectid,
    "size": pageSize4.value,
    "starttime": searchForm.time.length > 0 ? searchForm.time[0] : '',
  }
  selalarmexcelhistory(Q).then(res => {
    total.value = res.page.total
    tableData.value = res.result
  }).finally(() => loading.value = false)
}

getData()

</script>

<template>
  <tzLoading v-if="loading"></tzLoading>

  <div class="flex flex-col flex-1 overflow-auto" v-else>
    <div class="h-[13%]"></div>
    <div class="px-[25px] flex gap-[20px]">


      <el-form-item label="日期">
        <el-date-picker v-model="searchForm.time" type="daterange" range-separator="To" start-placeholder="Start date"
          end-placeholder="End date" placeholder="请选择日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
      </el-form-item>

      <el-form-item label="项目">
        <el-select v-model="searchForm.projectid" placeholder="请选择项目" @change="getequipmentData()">
          <el-option v-for="item in projectoptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="设备">
        <el-select v-model="searchForm.equipmentid" placeholder="请选择设备" style="">
          <el-option v-for="item in equipmentoptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-button @click="getData" class="w-[90px] ml-auto  flex justify-center items-center" color="#0c9bc8">
        <span class="text-[16px] font-medium text-white">查询</span>
      </el-button>

    </div>
    <div class="flex-1 p-[25px] overflow-auto">
      <el-table :data="tableData" class="" style="width: 100%;height: 100%;">



        <el-table-column prop="she1" label="保存位置">
          <template #default="scope">
            <el-link type="success">{{ scope.row.historyAddress }}</el-link>
          </template>
        </el-table-column>


        <el-table-column prop="createTime" label="保存时间"></el-table-column>

      </el-table>
    </div>
    <div class="flex justify-center mb-[20px]">
      <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 20, 50, 100]"
        :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>





  </div>
</template>

<style scoped>
:deep(.el-table__row) {
  background-color: #f3fdf1;
}

:deep(th>.el-table__cell) {
  background-color: #0f914c;
}

:deep(.el-table th.el-table__cell) {
  background-color: #0e904c;
}


:deep(.el-table th.el-table__cell .cell) {
  color: #fff;
}
</style>
